<template>
  <div class="h-full flex flex-col">
    <div class="h-full flex flex-col">
      <a-card class="tableBuild">
        <!-- 新增按钮 -->
        <div class="mb-[20px]">
          <div style="display: flex; justify-content: flex-end;margin-bottom: 20px;">
            <a-button type="primary" icon="plus" @click="create()">{{ $t('user.v155') }}</a-button>
    </div>
          <!-- <a-button type="primary" icon="plus" @click="create()">{{ $t( 'user.verification-code.required111566110577114') }}</a-button> -->
        </div>
        <!-- 主列表 -->
        <a-table ref="table" size="middle" class="h-full overflow-x-auto" :dataSource="listData"
          :pagination="false" @change="tableChange" :loading="listLoading" :rowKey="record => record.Id">
          <a-table-column key="ConfigurationItemsContent" :title="$t( 'user.register.get-verification-code')">
            <template slot-scope="text, record">
                    <span>{{ isLang?record.ConfigurationItemsContent:record.ConfigurationItemsContent }}</span>
              </template>
            <!-- <span slot="title" class="min-w-90p">{{ $t( 'user.register.get-verification-code') }}</span> -->
          </a-table-column>
          <a-table-column key="ConfigurationItemsCreatetime" data-index="ConfigurationItemsCreatetime">
            <span slot="title" class="min-w-90p">{{ $t(   'user.verification-code.required11156611011') }}</span>
          </a-table-column>
          <a-table-column key="ConfigurationItemsUpdatetime" data-index="ConfigurationItemsUpdatetime">
            <span slot="title" class="min-w-90p">{{ $t( 'user.verification-code.required111566110577119') }}</span>
          </a-table-column>
          <a-table-column key="status" :title="$t( 'user.verification-code.required1115661101')">
      <template slot-scope="text, record">
        <span>
           <!-- 状态的处理 -->
           <a-switch default-checked :checked="record.ConfigurationItemsEnableStatus == 1"
              @change="onChangeStatus(record)" />
        </span>
      </template>
    </a-table-column>
          <a-table-column key="action" :title="$t('app.setting.othersettings')">
      <template slot-scope="text, record">
        <span>
           <!-- 修改按钮 -->
           <a-button type="link" @click="edit(record)">{{ $t('user.verification-code.required111566147') }}</a-button>
            <!-- 删除按钮 -->
            <a-popconfirm :title="$t('user.verification-code.required111566110577225')" :ok-text="$t('user.verification-code.required1166')" :cancel-text="$t('user.email.required11')" @confirm="() =>del(record.Id)">
              
              <a-button type="link" size="small">{{ $t('app.setting.copy') }}</a-button>
            </a-popconfirm>
        </span>
       
      </template>
    </a-table-column>
        </a-table>
        <a-pagination size="small" v-model="pagination.current" :total="pagination.total" hideOnSinglePage
                      :pageSize.sync="pagination.pageSize" @change="getList"/>
      </a-card>

    </div>

    <!-- 抽屉组件  ref绑定save  succeed绑定初始化的 init事件  -->
    <save ref="save" @succeed="init" />
  </div>
</template>

<script>
const columns = [
  {
    title: '名称',
    className: 'min-w-90p',
    dataIndex: 'ConfigurationItemsContent',
    align: 'center',
  },
  {
    title: '创建时间',
    className: 'min-w-90p',
    dataIndex: 'ConfigurationItemsCreatetime',
    align: 'center',
  },
  {
    title: '修改时间',
    className: 'min-w-90p',
    dataIndex: 'ConfigurationItemsUpdatetime',
    align: 'center',
  },
  {
    title: '启用状态',
    className: 'min-w-90p',
    dataIndex: 'ConfigurationItemsEnableStatus',
    align: 'center',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    width: '150px',
    dataIndex: '',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },

]
// 引入save组件
import Save from './components/save.vue'
import { configurationLists, configurationChangeStatus, configurationDelete } from "@/api/configs"
export default {
  name: "appid",
  // 挂载 save组件
  components: { Save },
  data() {
    return {
      columns: columns,
      /**table数据 */
      listData: [],
      isLang:true,
      // table的loading 状态
      listLoading: false,
      // 分页参数
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) => this.$t('user.verification-code.required111566110577216',{total}, 'user.verification-code.required111566110577217'),
      },

    }
  },
  created() {
    this.getList()
  },
  mounted(){
    let that=this;
    window.addEventListener('setItemEvent', function(e) {
        if(e.key=='lang'){
          let lang= JSON.parse(e.value)
          console.log(lang);
          if(lang == 'zh-EN'){
            that.isLang=false;
          }else{
            that.isLang=true
          }
        }
    })
  },
  methods: {
    /**
    * 搜索事件 直接复制使用 通用的
    */
    search() {
      this.pagination.current = 1
      this.getList()
    },
    // 分页事件 直接复制使用 通用的
    tableChange(pagination) {
      this.pagination = pagination
      this.getList()
    },
    // 创建成功刷新列表 or 初始化事件 通用的 如果搜索条件有下拉列表 就需要放这里面
    init() {
      this.pagination.current = 1
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const { current, pageSize } = this.pagination
      try {
        // 调用查询列表
        const { data } = await configurationLists({
          ...{ page: current, pageSize, ConfigurationItemsState: 3 },
        })
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data
        // 给table赋值
        this.listData = Lists || []
        // 给分页数据赋值
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },

    /**
     * 切换状态
     */
    async onChangeStatus(e) {
      this.listLoading = true
      try {
        // 切换状态
        await configurationChangeStatus({
          Id: e.Id
        })
        this.$message.success(this.$t( 'user.verification-code.required111566110577254'))
        this.init()
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },

    /**
     * 创建 通用的
     */
    create() {
      // 使用ref绑定的组件使用 this.$refs.save.open() 调用组件中的open方法
      // 创建不需要传递参数
      this.$refs.save.open()
    },
    /**
     * 修改 通用的
     * @param {*}
     */
    edit(data) {
      // 使用ref绑定的组件使用 this.$refs.save.open() 调用组件中的open方法
      // 修改需要传递参数 1代表是修改 data是表格里面传过来的参数
      this.$refs.save.open(1, data)
    },
    /**
     * 删除 通用的
     * @param {*} key
     */
    async del(id) {
      try {
        console.log(id);
        // 传过来的id直接请求删除api
        await configurationDelete({ Id: id }) 
        this.$message.success(this.$t('user.verification-code.required111566110577133'))
        // 重新初始化列表刷新数据
        this.init()
      } catch (error) {
        this.$message.error(error)
      } finally {
      }
    },
  }
}
</script>

<style>
.ant-pagination {
  float: right;
}
</style>
